<template >
    <div>
        <div>
            <span >全选</span>
            <input type="checkbox" v-model="allChecked">
        </div>
        <ul>
            <li v-for="item in state" :key="item.name">
                <input type="checkbox" v-model="item.isChecked">
                <span>{{item.name}}</span>
            </li>
        </ul>
    </div>
</template>

<script setup>
/**
 * 使用computed实现全选。
 * 
 */

import { reactive, computed, toValue } from 'vue';
const state = reactive([
    { id: 1, name: '张三', isChecked: true },  //默认勾选
    { id: 2, name: '李四', isChecked: false },
    { id: 3, name: '王五', isChecked: false },
]);

// 上面的全选依赖下面几个数据是否勾选
const allChecked = computed({
    get() {
        // every 方法测试一个数组内的所有元素是否能通过某个指定函数的测试，返回一个布尔值  就是是否满足条件，
        return state.every(item => item.isChecked);   //如果item是不是true
        // 使用find  取反
        //return !state.find(item => !item.isChecked);
    },
    //设置勾选全选，取消或者勾选全部
    set(checked) {
        // forEach 方法对数组的每个元素执行一次提供的函数
        state.forEach(item => {    //箭头函数的显示返回 
            item.isChecked = checked;
        });
        // 箭头函数隐式写法
        // state.forEach(item => item.isChecked = checked)
    }
});


</script>

<style>
    
</style>